<div class="layuimini-container f-tool-fixed">
    <form id="app-form" class="layui-form layuimini-form">
        <input type="hidden" name="update_time" value="{$row.update_time|default=''}">
        <div class="f-tool">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>
                {:lang('common.btn_save')}
            </button>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.code')}</label>
            <div class="layui-input-inline">
                <input type="text" name="code" class="layui-input" value="{$row.code|default=''}"
                       placeholder="{:lang('common.input')}{:lang('template.code')}" lay-verify="required">
            </div>
            <label class="layui-form-label">{:lang('template.days')}</label>
            <div class="layui-input-inline">
                <select name="days" lay-filter="days" lay-verify="required">
                    <option value="">{:lang("common.choose")}{:lang("template.days")}</option>
                    {for start="1" end="16"}
                    <option value="{$i}" {if $i==$row.days}selected{/if}>{$i}{:lang('common.day_unit')}</option>
                    {/for}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.destination_id')}</label>
            <div class="layui-input-inline">
                <select lay-filter="provinceId" lay-verify="required">
                    <option value="">{:lang("common.choose")}{:lang("common.province_name")}</option>
                    {foreach :provinceList() as $val}
                    <option value="{$val.id}" {if $val.id==$row.province_id}selected{/if}>{$val.name}</option>
                    {/foreach}
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="destination_id" id="cityId" lay-verify="required">
                    <option value="">{:lang("common.choose")}{:lang("common.city_name")}</option>
                    {foreach :getCityListByProvinceId($row['province_id']) as $val}
                    <option value="{$val.id}" {if $val.id==$row.destination_id}selected{/if}>{$val.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.name')}</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" value="{$row.name|default=''}"
                       placeholder="{:lang('common.input')}{:lang('template.name')}" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.tags')}</label>
            <div class="layui-input-inline w-520">
                <input type="text" name="tags" class="layui-input" value="{$row.tags|default=''}"
                       placeholder="{:lang('common.input')}{:lang('template.tags')}" lay-verify="required">
            </div>
            <div class="layui-form-mid layui-word-aux">{:lang('template.tags_tip')}</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.pic')}</label>
            <div class="layui-input-block layuimini-upload">
                <input name="pic" class="layui-input layui-col-xs6" lay-verify="required" readonly
                       placeholder="{:lang('template.pic_placeholder')}" value="{$row.pic|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="pic" data-upload-exts="png|jpg|jpeg|gif">
                        <i class="fa fa-upload"></i> {:lang('common.btn_upload')}</a></span>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.pics')}</label>
            <div class="layui-input-block">
                <input type="hidden" id="pics" name="pics" value="{$row.pics|default=''}">
                <div class="layui-input-inline">
                    <span><a id="upload_pics" class="layui-btn"><i class="fa fa-upload"></i> {:lang('common.btn_upload')}</a></span>
                    <div id="pic_list"></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.feature')}</label>
            <div class="layui-input-block w-750">
                <textarea class="layui-textarea editor" name="feature" rows="10">{$row.feature|default=''}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.details')}</label>
            <div id="details" class="layui-input-inline w-750">
                {foreach $row.details as $val}
                <div id="day_{$val.sort}">
                    <input type="hidden" id="id" name="detail_id_{$val.sort}" value="{$val.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label detail_day">{:lang('common.sort_unit')}<b
                                class="orange">{$val.sort}</b>{:lang('common.day_unit')}</label>
                        <div class="layui-input-block w-520">
                            <input type="text" class="layui-input" lay-verify="required" name="detail_title_{$val.sort}"
                                   placeholder="{:lang('common.input')}{:lang('detail.title')}" value="{$val.title}">
                        </div>
                    </div>

                    <div class="p-b-15 w-750">
                        <textarea class="layui-textarea editor" id="detail_content_{$val.sort}"
                                  name="detail_content_{$val.sort}" rows="10">{$val.content}</textarea>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang('detail.stay')}</label>
                        <div class="layui-input-block w-520">
                            <input type="text" name="detail_stay_{$val.sort}" class="layui-input" value="{$val.stay}"
                                   placeholder="{:lang('common.input')}{:lang('detail.stay')}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">{:lang('detail.dinner')}</label>
                        <div class="layui-input-block w-520">
                            <textarea class="layui-textarea" name="detail_dinner_{$val.sort}" rows="3"
                                      placeholder="{:lang('common.input')}{:lang('detail.dinner')}">{$val.dinner}</textarea>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.fee_include')}</label>
            <div class="layui-input-block w-750">
                <textarea class="layui-textarea editor" name="fee_include"
                          rows="10">{$row.fee_include|default=''}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.fee_exclude')}</label>
            <div class="layui-input-block w-750">
                <textarea class="layui-textarea editor" name="fee_exclude"
                          rows="10">{$row.fee_exclude|default=''}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.note')}</label>
            <div class="layui-input-block w-750">
                <textarea class="layui-textarea editor" name="note" rows="10">{$row.note|default=''}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('common.status')}</label>
            <div class="layui-input-inline">
                <select name="status" lay-verify="required" default-value="{$row.status|default=''}"
                        data-select-type="template_status_list">
                </select>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="{:sysValue('cdn')}/ckeditor/4.17.1/ckeditor.js"></script>
<script>
    layui.use(['myApp'], function () {
        let $ = layui.jquery
            , form = layui.form
            , upload = layui.upload
            , myCommon = layui.myCommon
            , myApp = layui.myApp;

        form.on('select(provinceId)', function (data) {
            myApp.getCityListByProvinceId(data.value);
        });

        form.on('select(days)', function (data) {
            let sb = [], days = [], day = parseInt(data.value);
            for (let i = 1; i <= day; i++) {
                let $dom = $('#day_' + i);
                if ($dom.size() == 0) {
                    days.push(i);
                    sb.push('<div id="day_' + i + '">');

                    sb.push('<div class="layui-form-item">');
                    sb.push('<label class="layui-form-label detail_day">{:lang(\'common.sort_unit\')}<b class="orange">'
                        + i + '</b>{:lang(\'common.day_unit\')}</label>');
                    sb.push('<div class="layui-input-block w-520">');
                    sb.push('<input type="text" class="layui-input" lay-verify="required" name="detail_title_'
                        + i + '" placeholder="{:lang(\'common.input\')}{:lang(\'detail.title\')}">');
                    sb.push('</div></div>');

                    sb.push('<div class="p-b-15 w-750">');
                    sb.push('<textarea class="layui-textarea editor" id="detail_content_'
                        + i + '" name="detail_content_' + i + '" rows="10"></textarea>');
                    sb.push('</div>');

                    sb.push('<div class="layui-form-item">');
                    sb.push('<label class="layui-form-label">{:lang(\'detail.stay\')}</label>');
                    sb.push('<div class="layui-input-block w-520">');
                    sb.push('<input type="text" name="detail_stay_' + i + '" class="layui-input" placeholder="{:lang(\'common.input\')}{:lang(\'detail.stay\')}">');
                    sb.push('</div></div>');

                    sb.push('<div class="layui-form-item">');
                    sb.push('<label class="layui-form-label">{:lang(\'detail.dinner\')}</label>');
                    sb.push('<div class="layui-input-block w-520">');
                    sb.push('<textarea class="layui-textarea" name="detail_dinner_' + i + '" placeholder="{:lang(\'common.input\')}{:lang(\'detail.dinner\')}" rows="3"></textarea>');
                    sb.push('</div></div>');

                    sb.push('</div>');
                }
            }
            if (sb.length > 0) {
                $('#details').append(sb.join(''));
                days.forEach(i => {
                    myCommon.convertEditor($('#detail_content_' + i));
                })
            }
            for (let i = day + 1; i <= 20; i++) {
                let $dom = $('#day_' + i);
                if ($dom.size() == 0) {
                    break;
                } else {
                    $dom.remove();
                }
            }
        });

        window.updatePics = function () {
            let sb = []
            $('#pic_list').find('.image-pic').each(function () {
                sb.push($(this).attr('src'))
            })
            $('#pics').val(sb.join(';'))
        }

        window.deleteImageItem = function (dom) {
            $(dom).closest('.image-item').remove()
            updatePics()
        }

        //显示多图
        if ($('#pics').val() != '') {
            let pics = $('#pics').val().split(';')
            for (let i = 0; i < pics.length; i++) {
                $('#pic_list').append('<div class="image-item"><img class="image-pic" src="' + pics[i]
                    + '"><i class="fa fa-close" onclick="deleteImageItem(this)"></i></div>')
            }
        }

        upload.render({
            elem: '#upload_pics'
            , url: myCommon.url('ajax/upload')
            , multiple: true
            , done: function (res) {
                //上传完毕
                let url = res.data.url
                if (res.code == 0) {
                    $('#pic_list').append('<div class="image-item"><img class="image-pic" src="' + url
                        + '"><i class="fa fa-close" onclick="deleteImageItem(this)"></i></div>')
                    updatePics()
                }
            }
        })
        myCommon.listen();
    });
</script>